
<template>
    <div class="multipane-resizer" ref="host" @mousedown="panResizeEvent($event)">
      <slot></slot>
    </div>
  </template>
  
  <script>
  import { ref } from "@vue/composition-api";
  export default {
    setup(props, ctx) {
      let host = ref(null)
      function panResizeEvent(mouseevent) {
        //  ctx.emit("pane-resize",mouseevent)
        var event = new CustomEvent("pane-resize", {
          detail: {
            data: mouseevent
          },
          bubbles: true,
          composed: true
        });
        host.value.dispatchEvent(event);
      }
      return { panResizeEvent, host }
    }
  }
  </script>